<template>
    <div>
        <el-row class="action-button-group">
            <el-col :span="8">
                <el-row type="flex" justify="start">
                    <slot name="buttonLeft">
                    </slot>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" justify="center">
                    <slot name="buttonCenter">
                    </slot>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" justify="end">
                    <el-button type="primary" v-if="taskKey != 'registerinfo_fgw_do'&&taskKey != 'assign'&& taskKey != 'registerinfo_fgw_assign'&& taskKey != 'registerinfo_fgw_check'&& taskKey != 'registerinfo_fgw_leader_check'&& taskKey != 'list_fgw_check'&& taskKey != 'list_fgw_do'&& taskKey != 'list_fgw_secretary'&& taskKey != 'list_fgw_leader'&& taskKey != 'list_fgw_typesetting'&& taskKey != 'list_fgw_proofread'&& taskKey != 'list_fgw_stamp'  " @click.stop="assign()">转办</el-button>
                    <el-button type="primary" @click.stop="changeAction(action)" v-for="action in actionList" :key="action.value">{{action.name}}</el-button>
                    <slot name="buttonRight">
                    </slot>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="dialogVisible">
            <el-row>
                <el-col :span="8">
                    <el-row type="flex" justify="start">
                        <slot name="headerLeft">
                        </slot>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row type="flex" justify="center">
                        <slot name="headerCenter">
                        </slot>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row type="flex" justify="end">
                        <slot name="headerRight">
                        </slot>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="bs-form-no-border">
                <slot name="formHeader">
                </slot>
                <el-form v-if="actionList != null && actionList.length > 0" ref="actionForm" :label-position="labelPosition" :label-width="labelWidth" :model="actionForm" :rules="rules">
                    <el-form-item prop="comment"  v-if="action != null && action.needComment" :label="action.commentLabel">
                        <el-input v-model="actionForm.comment" type="textarea" :rows="5">
                        </el-input>
                        <common-words :presentWords="presentWords" @putCommonWordsToForm="putCommonWordsToForm"></common-words>
                    </el-form-item>
                    <el-form-item prop="commentFileIdList" v-if="action != null && action.needFile" :label="action.fileLabel">
                        <file-upload v-model="fileList" :limit="1">
                        </file-upload>
                    </el-form-item>
                </el-form>
                <slot name="formFooter">
                </slot>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-row type="flex" justify="start">
                        <slot name="footerLeft">
                        </slot>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row type="flex" justify="center">
                        <slot name="footerCenter">
                        </slot>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row type="flex" justify="end">
                        <slot name="footerRight">
                        </slot>
                    </el-row>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" v-if="footerButtonContrl">
                <el-button type="primary" :loading="dialogBtnLoading" @click="dialogConfirm">确认</el-button>
                <el-button type="info" :loading="dialogBtnLoading" @click="dialogCancel">取消</el-button>
            </el-row>
        </el-dialog>
        <assign :visible="assignVisible" :task-id="taskIdAssign" @cancelAssign="cancelAssign"></assign>
    </div>
</template>

<script>
    import {getConfMapForTask} from '@/api/activiti/node-conf';
    import fileUpload from '@/components/file/upload.vue';
    import {getTaskInfo} from "@/api/activiti/monitor";

    export default {
        name: "activitiAction",
        components:{
            fileUpload
        },
        data(){
            return {
                actionForm: {
                    action: null,
                    //不定义，会导致表单校验规则失效
                    commentFileIdList: null,
                    comment:'',
                },
                fileList:[],
                rules: {},
                configMap: null,
                actionValue: null,
                action: null,
                actionList: [],
                dialogVisible: false,
                dialogBtnLoading: false,
                assignVisible: false,
                taskIdAssign:null,
                presentWords:null,
                taskKey: null

            }
        },
        model: {
            prop: 'form',
            event: 'updateForm'
        },
        props: {
            taskId:{
                type: String,
                required: true
            },
            form:{
                type: Object,
                required: true
            },
            labelWidth: {
                type: String,
                default: '100px'
            },
            labelPosition: {
                type: String,
                default: 'left'
            },
            footerButtonContrl: {
                type: Boolean,
                default:true
            }
        },
        created() {
            this.init();
        },
        watch:{
            'actionForm.comment'(val){
                if(val!=''&&val!=null){
                    this.presentWords = val
                }
            },
            actionForm:{
                handler(){
                    this.updateForm();
                },
                deep: true
            },
            action() {
                if(this.action != null) {
                    //设置动作值，清除其他值
                    this.actionForm = {
                        action: this.action.value,
                        comment:null,
                    };
                    if (this.$refs.actionForm != null) {
                        this.$refs.actionForm.clearValidate();
                    }
                    this.updateRules(this.action);
                }
            },
            fileList:{
                handler(){
                    if (this.fileList != null) {
                        let commentFileIdList = [];
                        if(this.fileList.length > 0){
                            //暂时限制附件数量为1个
                            commentFileIdList.push(this.fileList[0].fileId);
                        }
                        this.actionForm.commentFileIdList = commentFileIdList;
                        //没有触发actionForm的watch，需要手动更新
                        this.updateForm();
                    }
                },
                deep: true
            },
        },
        methods:{
            init(){
                if (this.configMap == null) {
                    this.getConfMapForTask();
                }
                this.getTaskKey();
            },
            getTaskKey(){
                getTaskInfo(this.taskId).then((res) => {
                    this.taskKey = res.data.data.taskKey;
                });
            },
            updateForm(){
                this.$emit('updateForm', Object.assign({}, this.form, this.actionForm));
            },
            getConfMapForTask(){
                let query = {
                    taskId: this.taskId
                };
                getConfMapForTask(query).then((res)=>{
                    this.configMap = res.data.data;
                    if (this.configMap != null) {
                        this.actionList = this.configMap['bs:UserTask#action'];
                    }
                })
            },
            validateForm(callback) {
                this.$refs.actionForm.validate((valid, object) => {
                    callback(valid, object);
                });
            },
            updateRules(action){
                if(action.commentRequired){
                    this.rules['comment'] = [
                        {required: true, message: '请输入' + action.commentLabel, trigger: 'blur'},
                    ]
                }else {
                    this.rules['comment'] = []
                }
                if(action.fileRequired){
                    this.rules['commentFileIdList'] = [
                        {required: true, message: '请上传' + action.fileLabel, trigger: 'blur'},
                    ];
                }else {
                    this.rules['commentFileIdList'] = []
                }
            },
            changeAction(action){
                this.$emit('sendAction', action);
                this.action = action;
                this.showDialog();
            },
            showDialog(){
                this.dialogBtnLoading = false;
                this.dialogVisible = true;
            },
            dialogCancel(){
                this.dialogBtnLoading = true;
                this.dialogVisible = false;
            },
            dialogConfirm(){
                this.dialogBtnLoading = true;
                this.$emit('confirm', this.validateForm, this.stopLoading, this.closeDialog);
            },
            stopLoading(){
                this.dialogBtnLoading = false;
            },
            closeDialog(){
                this.dialogVisible = false;
            },

            putCommonWordsToForm(commonWords){
                this.actionForm.comment = commonWords
            },

            //转办流程
            assign(){
                this.taskIdAssign = this.taskId;
                this.assignVisible = true;
            },
            cancelAssign() {
                this.assignVisible = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .action-button-group{
        margin: 10px;
    }
    .el-col-8 {
      width: auto;
      float:none;

    }
</style>
